<template>
  <div v-if="isVisible" class="modal-overlay" @click.self="close">
    <div class="modal-content">
      <span class="close-button" @click="close">&times;</span>
      <div class="register-header">
        <h2>家政服务注册</h2>
        <p>加入我们，开启您的家政服务之旅</p>
      </div>
      <!-- 上传图片 -->
      <div class="form-group">
        <label class="upload-area" :class="{ active: filePreview }">
          <!-- 隐藏原生 input 用 label 接管点击 -->
          <input
              ref="fileInput"
              type="file"
              accept="image/*"
              style="display:none"
              @change="handleSelectFile"
          />
          <!-- 预览图 或 图标占位 -->
          <img v-if="filePreview" :src="filePreview" class="preview" alt="预览" />
          <i v-else class="icon">📷</i>
          <span>{{ filePreview ? '重新选择' : '点击上传头像 / 证件照' }}</span>
        </label>
      </div>
      <form @submit.prevent="handleRegister" class="register-form">
        <!-- 用户名 -->
        <div class="form-group">
          <input
              v-model="accountUsername"
              @blur="checkUsername"
              type="text"
              placeholder="请输入用户名(用于登录)"
              required
          />
          <p v-if="usernameExists" class="error-message">用户名已存在</p>
        </div>

        <!-- 密码 -->
        <div class="form-group">
          <input
              v-model="accountPassword"
              type="password"
              placeholder="请输入密码"
              required
          />
        </div>

        <!-- 确认密码 -->
        <div class="form-group">
          <input
              v-model="confirmPassword"
              type="password"
              placeholder="请再次输入密码"
              required
          />
        </div>

        <!-- 真实姓名 -->
        <div class="form-group">
          <input
              v-model="userName"
              type="text"
              placeholder="请输入真实姓名"
              required
          />
        </div>

        <!-- 性别 -->
        <div class="form-group sex-group">
          <label>
            <input v-model="userSex" value="male" type="radio" />
            男
          </label>
          <label>
            <input v-model="userSex" value="female" type="radio" />
            女
          </label>
        </div>

        <!-- 电话号码 -->
        <div class="form-group">
          <input
              v-model="userPhone"
              type="tel"
              placeholder="请输入联系电话"
              required
          />
        </div>

        <div class="button-group">
          <button type="submit" class="submit-button">立即注册</button>
        </div>
      </form>

      <p @click="goLogin" class="toggle-link">
        已有账号？<span>立即登录</span>
      </p>
    </div>
  </div>
</template>

<script>
import {BASE_URL} from "@/util/Config.js";
import axios from 'axios';

export default {
  props: {
    isVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      accountUsername: '',
      accountPassword: '',
      confirmPassword: '',
      userName: '',
      userSex: 'male',
      userPhone: '',
      usernameExists: false,
      file: null,         // 要上传的文件
      filePreview: null   // base64 预览地址
    };
  },
  methods: {

    /** 选取文件 & 预览 */
    handleSelectFile(e) {
      const file = e.target.files[0];
      if (!file) return;
      if (!file.type.startsWith('image/')) {
        alert('只能上传图片');
        return;
      }
      /** 限制5MB */
      if (file.size > 5 * 1024 * 1024) {
        alert('图片最大 5MB');
        return;
      }
      this.file = file;
      /* 本地预览 */
      const reader = new FileReader();
      reader.onload = (ev) => (this.filePreview = ev.target.result);
      reader.readAsDataURL(file);
    },

    close() {
      this.$emit('close');
    },
    goLogin() {
      this.$emit('open-login');
    },
    checkUsername() {
      if (!this.accountUsername) {
        this.usernameExists = false;
        return;
      }
      axios.get(`/registercheck?accountUsername=${encodeURIComponent(this.accountUsername)}`)
          .then(res => (this.usernameExists = res.data.code === 201))
          .catch(() => alert('网络错误'));
    },
    handleRegister() {
      if (this.accountPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }

      const data = {
        accountUsername: this.accountUsername,
        accountPassword: this.accountPassword,
        userName: this.userName,
        userSex: this.userSex,
        userPhone: this.userPhone,
        userImg: this.filePreview
      };

      axios.post(BASE_URL+'/register', data)
          .then(res => {
            if (res.data.code === 200) {
              alert(res.data.msg);
              this.close();
            } else {
              alert(res.data.msg);
            }
          })
          .catch(() => alert('网络错误'));
    }
  }
};
</script>

<style scoped>
/* 使用和ModalLogin一致的模态框基础样式 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  width: 380px;
  border-radius: 16px;
  padding: 32px 36px 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.register-header {
  margin-bottom: 20px;
}

.register-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.register-header p {
  margin: 8px 0 0;
  color: #777;
  font-size: 14px;
}

.form-group {
  margin-bottom: 15px;
  text-align: left;
}

.sex-group {
  display: flex;
  gap: 20px;
  padding: 10px 0;
}

.sex-group label {
  display: flex;
  align-items: center;
  gap: 5px;
}

input {
  width: 100%;
  border: 1px solid #ddd;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
  transition: 0.2s;
}

input:focus {
  border-color: #1abc9c;
  outline: none;
}

.error-message {
  color: #e74c3c;
  font-size: 13px;
  margin: 5px 0 0;
}

.button-group {
  margin: 25px 0 15px;
}

.submit-button {
  width: 100%;
  background: #1abc9c;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-button:hover {
  background: #16a085;
}

.toggle-link {
  color: #777;
  font-size: 14px;
}

.toggle-link span {
  color: #1abc9c;
  cursor: pointer;
  text-decoration: underline;
}
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  border: 1px dashed #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.upload-area:hover,
.upload-area.active {
  border-color: #1abc9c;
  background-color: #f7fdfc;
}
.upload-area .icon {
  font-size: 32px;
}
.upload-area span {
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}
.upload-area .preview {
  max-height: 90px;
  max-width: 90px;
  border-radius: 6px;
  object-fit: cover;
}
</style>